import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import styles from './ChooseModal.less';
import {
	Row,
	Col,
	Card,
	Form,
	Input,
	Select,
	Button,
	Modal,
	Tag,
	message,
	Badge,
	Radio,
	Upload,
	Icon,
} from 'antd';

const FormItem = Form.Item;
const { CheckableTag } = Tag;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

@Form.create()
export default class ChooseAuthorModal extends PureComponent {
	constructor(props) {
		super(props);

		console.log('初始化数据', this.props.initValue);

	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.authorId != this.props.authorId) {
			this.setState({ authorId: nextProps.authorId })
		}
	}

	state = {
		authorId: this.props.authorId || null,
		authorName: null,
	};

	_checkTag(checked, authorId, authorName) {
		console.log(authorId);
		this.setState({ authorId: authorId, authorName: authorName })
	}


	_okHandle() {
		if (!this.state.authorId) {
			message.error('请选择作者');
			return;
		}
		const values = {
			authorId: this.state.authorId,
			authorName: this.state.authorName,
		}
		this.props.chooseAuthor(values);
		// form.resetFields();
	}

	render() {
		const { form, record } = this.props;
		return (
			<Modal
				width={700}
				destroyOnClose
				title="选择作者"
				visible={this.props.visible}
				afterClose={() => this.setState({ authorId: this.props.authorId })}
				onOk={() => this._okHandle()}
				onCancel={() => this.props.setAuthorVisible(false)}
			>
				<FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 9 }} label="作者姓名">
					<Search
						placeholder="作者姓名"
						enterButton="搜索"
						size="default"
						onSearch={value => this.props.authorSearch(value)}
					/>
				</FormItem>
				<div className={styles.tagWrapper}>
					{this.props.authorList && this.props.authorList.map((item, i) => (
						<CheckableTag key={item.authorId} checked={item.authorId == this.state.authorId ? true : false} className={styles.tag} onChange={(checked) => this._checkTag(checked, item.authorId, item.authorName)}

						>
							{item.authorName}
						</CheckableTag>))
					}
				</div>

			</Modal>
		);
	}
}